
{% load staticfiles %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="{% static 'assets/css/style.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static '/assets/css/result.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static '/assets/css/bootstrap.min.css' %}" />
    <style>
        span.highlighted {
           color: red;
       }
        .pagenation a{
            margin-left: 20px;
        }
        .searchList a{
            margin-right: 15px;
            color: #4e555b;
            margin-top: 5px;
        }
        .mybutton {
            right: 100px;
            position: absolute;
            background:rgb(210, 38, 38) ;
            border: 1px solid rgb(210, 38, 38);
            color: #ffffff;
            height: 37px;
            padding: 0px 20px;
        }
        .myimg{
            height: 65px;
            width: 65px;
        }
        .myfont{
            font-size: 28px;
            position: relative;
            top: 5px;
            left: 5px;
            color: rgb(210, 38, 38);
        }
    </style>
</head>
<body>
    {% load highlight  %}
    {% if query %}
		<div id="hd" class="ue-clear">
        <div style="position: absolute;top: 5px;left: 200px;">
             <img src="{% static '/assets/img/jmu.jpg' %}" class="myimg">
            <span class="myfont">集大新闻</span>
        </div>

			<div class="inputArea" style="left: 30%;">
				<input type="text" class="searchInput" style="width: 450px;height: 37px" id="search_value"/>
				<input type="button" class="searchButton" onclick="add_search()" value="搜索" style="background: rgb(210, 38, 38);color: #fafafa;" />
			</div>

            <button class="mybutton" onclick="to_analysis()">数据分析</button>
		</div>
		<div class="nav" style="height: 40px;">
			<ul class="searchList" style="left: 20%;position: absolute;">
                <a href="/search?q=计算机工程学院" >计算机工程学院</a>
                <a href="/search?q=轮机工程学院" >轮机工程学院</a>
                <a href="/search?q=法学院" >法学院</a>
                <a href="/search?q=航海学院" >航海学院</a>
                <a href="/search?q=学院" >所有学院</a>
			</ul>
		</div>
{#        <button onclick="to()">to</button>#}
        <ul class="goods_type_list clearfix">
			<table class="table table-hover" style="width: 90%;margin: auto;border: 2px solid rgb(222, 226, 230);margin-top: 30px;">
				<thead>
					<tr>
						<th width="70%" style="font-weight: bolder;color: #0c5460">新闻标题</th>
						<th width="20%" style="font-weight: bolder;color: #0c5460">学院</th>
						<th width="10%" style="font-weight: bolder;color: #0c5460">发布时间</th>
					</tr>
				</thead>
				<tbody style="cursor: pointer">
					{% for result in page.object_list %}
						<tr onclick="to('/{{ result.object.url }}/')">
{#                            <a href="/{{ result.object.url }}/">#}
                                <td>{% highlight result.object.title with query %}</td>
                                <td>{% highlight result.object.college with query %}</td>
                                <td>{{result.object.pubdate}}</td>
{#                            </a>#}
						</tr>

					{% endfor %}
				</tbody>
			</table>
        </ul>


        <div class="pagenation" style="text-align: center;position: relative">
            {% if page.has_previous %}
                <a href="/search?q={{query}}&page={{page.previous_page_number}}">&lt;上一页</a>
            {% else %}
                <a href="/search?q={{ query }}">&lt;上一页</a>
            {% endif %}
            {% if page.number <= 5 %}   <!--当前页面数小于5时-->
                {% for page_num in paginator.page_range %}
                    {%if forloop.counter <= 5 %}
                    <a href="/search?q={{query}}&page={{page_num}}"
                       {% if page.number == page_num %}
                       class="active"
                       {% endif %}
                    >{{ page_num }}</a>
                    {%endif%}
                {% endfor %}
            {% else %}
                {% if page.number|add:1 > paginator.num_pages %}
                    <a href="/search?q={{query}}&page={{page.number|add:-4}}">{{ page.number|add:-4}}</a>
                {% endif %}
                {% if page.number|add:2 > paginator.num_pages %}
                    <a href="/search?q={{query}}&page={{page.number|add:-3}}">{{ page.number|add:-3}}</a>
                {% endif %}
                <a href="/search?q={{query}}&page={{page.number|add:-2}}" >{{ page.number|add:-2}}</a>
                <a href="/search?q={{query}}&page={{page.number|add:-1}}">{{ page.number|add:-1}}</a>
                <a href="/search?q={{query}}&page={{page.number}}" class="active">{{ page.number }}</a>
                {% if page.number|add:1 <= paginator.num_pages %}
                    <a href="/search?q={{query}}&page={{page.number|add:1}}">{{ page.number|add:1}}</a>
                {% endif %}
                {% if page.number|add:2 <= paginator.num_pages %}
                    <a href="/search?q={{query}}&page={{page.number|add:2}}">{{ page.number|add:2}}</a>
                {% endif %}
            {% endif %}
            {% if page.has_next %}
                <a href="/search?q={{query}}&page={{page.next_page_number}}">下一页&gt;</a>
            {% else %}
                <a href="/search?q={{query}}&page={{paginator.num_pages}}">下一页&gt;</a>
            {% endif %}

            <span style="margin-left: 20px;color: #5c9bc4;">当前页号：[{{ page.number }}]</span>
            <span style="margin-left: 10px;color: #5c9bc4;">共{{ paginator.num_pages }}页</span>
            <div style="font-size: 15px">
                <button style="border: 2px solid #4795ea;color: #fafafa;background: #4795ea;" onclick="toPage()">跳转至</button><input id="page" type="text" style="width: 30px;margin: 10px;padding: 0px 2px;">页
            </div>
        </div>
    {% endif %}

    <script>
        function to(url){
            let str = url.slice(1);
            str = str.substr(0, str.length - 1);
            console.log(str);
            window.open(str);
        }
        function add_search() {
            var a=document.getElementById("search_value").value;
            console.log(a);
            window.location.href = "/search?q="+a;
        }
        function toPage() {

            var b=document.getElementById("page").value;
               if(!isNaN(b)){　　　　
                    window.location.href = "/search?q={{query}}&page="+b;
                    console.log(b);
　　　             return true;
　　          }else {
                   alert('请输入数字');
               }
        }
        function to_analysis() {
            window.location.href = "/analysis_page";
        }
    </script>
</body>

</html>